
import {reactive ,computed} from 'vue'
// todolist的item的接口
    interface Iitem{
      id:number,
      isdone:boolean,
      txt:string
    }
    interface Idata{
      todoList:Array<Iitem>, //添加的数组
      msg:string,  //输入框绑定的数据 
      add():void, //添加方法
      status:string, //切换状态
      doneList:any, //已完成的计算属性
      noList:any, //未完成的计算属性
      showList:Array<Iitem>, //负责渲染的数组
      del(id:number):void //删除方法
    }
    let datas:Idata=reactive({
      status:'all',
      todoList:[], //所有的待办事项CD
      showList:[], //用来渲染数组
      msg:"" ,//输入框信息 输入的待办事项
      add:()=>{
          datas.todoList.push({
              id:new Date().getTime(), //时间戳id
              txt:datas.msg,
              isdone:false //false 未完成  true已完成
          })
          // 把添加后的数组 赋值给渲染的数组
          datas.showList=datas.todoList;  
      },
      del:(id:number)=>{

          // 删除数组中的数据
            datas.todoList.forEach((item,index:number)=>{
              if(item.id===id){
                  datas.todoList.splice(index,1);
              }
            })
            // 删除后的数组 赋值给渲染数组
            datas.showList=datas.todoList;
      },
      chanegItem:(id:number)=>{
          // 通过id 找到数据中的isdone 取反
          datas.todoList.forEach((item,index:number)=>{
              if(item.id===id){
                datas.todoList[index].isdone=!datas.todoList[index].isdone;
              }
          })

      },
      doneList:computed(()=>{ //已完成的数组
          let doneList:Array<Iitem>= []; 
            datas.todoList.forEach(item=>{
              if(item.isdone==true){
                  doneList.push(item)
              }
            });
            return doneList
      }),
      noList:computed(()=>{ //未完成的数组
          let noDoneList:Array<Iitem>=[];
          datas.todoList.forEach(item=>{
                if(item.isdone==false){
                  noDoneList.push(item)
                }
            });
          return noDoneList
      }),
      changeData:(status:string)=>{ //点击切换事件
        //  status all  done  no
          // datas.status=status; 
            if(status=="all"){
              datas.showList=datas.todoList; //全部 
            }else if(status=='done'){
              datas.showList=datas.doneList;// 已完成
            }else if(status=="no"){
                datas.showList=datas.noList;//未完成
            }
      }
    })
  export default datas

